<template>
    <div class="home">
        <home-header></home-header>
        <hot-header :hotCities="hotCities"></hot-header>
        <sort-header :cities="cities"></sort-header>
        <list-header :cities="cities"></list-header>
    </div>
</template>
<script>
    import HomeHeader from './pages/Header'
    import HotHeader from './pages/Hot'
    import SortHeader from './pages/Sort'
    import ListHeader from './pages/List'
    export default{
        components:{
            HomeHeader,
            HotHeader,
            SortHeader,
            ListHeader
        },
        data () {
            return {
                hotCities:[],
                cities:[]
            }
        },
        mounted:function(){
            var that = this;
            this.$http.get('/api/city.json').then(function(res){
                let data = res.data.data;
                that.hotCities=data.hotCities;
                that.cities=data.cities;
            })
        }
    }
</script>
<style scoped>
    .city{
        background: #f5f5f5;
    }
</style>